<template>
  <div class="infinite-scroll" :style="{ height: height }">
    <div class="schedule_list">
      <div class="table-flex" v-if="ths && ths.length > 0 && list && list.length > 0">
        <div class="idx" style="color: #87cfff" :style="{ flex: xhflex }">序号</div>
        <div class="item-th" v-for="(th, index) in ths" :key="index" :style="{ flex: th.flex, textAlign: th.isCenter ? 'center' : '' }">
          {{ th.name }}
        </div>
      </div>
      <div class="scrollDiv" style="position: relative; flex: 1; overflow: auto; text-align: center; box-sizing: border-box">
        <!-- <vue-j-scroll v-if="list && list.length > 0" class="list-style" :steep="0.5" scroll-direction="top" :is-roller="true" :roller-scroll-distance="40"> -->
        <div v-if="list && list.length > 0" class="list-style">
          <div
            v-for="(item, index) in list"
            :key="'t' + index"
            :class="['swiper-slide custom-slide', { active: item.id == active || item.sn == active }]"
            :style="{ cursor: cursor }"
            @click="handleClick(item)"
          >
            <div class="idx" :style="{ flex: xhflex }">{{ index + 1 }}</div>
            <div v-for="(th, idx) in ths" :key="`${idx}-${item.id}`" :style="{ flex: th.flex }" class="txt-overflow">
              <div :class="{ highlight: th.isHighlight }" :title="item[th.property]">
                <div
                  class="txt-overflow"
                  :style="{
                    background: th.showBg ? 'url(' + getBgUrl(item[th.property]) + ') no-repeat center' : 'transparent',
                    backgroundSize: '70% 80%',
                    textAlign: th.isCenter ? 'center' : ''
                  }"
                >
                  {{ item[th.property] }} <span v-if="item[th.property] && item[th.property] != '-'">{{ th.unit }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- </vue-j-scroll> -->
        <div class="no-data" v-else>
          <img src="@/assets/img/no-data.png" alt="" />
          <span>暂无数据</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    xhflex: {
      type: Number,
      default: 4
    },
    // 类目列表
    ths: {
      type: Array,
      default: () => []
    },
    // 滚动列表高度
    height: {
      type: String,
      default: '100%'
    },
    // 列表数据
    list: {
      type: Array,
      default: () => []
    },
    activeId: {
      type: String,
      default: ''
    },
    cursor: {
      type: String,
      default: 'pointer'
    }
  },
  computed: {
    // ...mapState(['rPanelInfo'])
  },
  data() {
    return {
      active: ''
    }
  },
  watch: {
    activeId: {
      handler(newVal) {
        this.active = newVal
      },
      immediate: true
    }
  },
  methods: {
    handleClick(item) {
      console.log(item)
      // 与地图联动
      this.$emit('handleItemClick', item)
    },
    getBgUrl(newVal) {
      let bgUrl = ''
      switch (newVal) {
        case '超警戒':
        case '特大暴雨':
          bgUrl = require('@/assets/img/bg-lv1.png')
          break
        case '超保证':
        case '大暴雨':
          bgUrl = require('@/assets/img/bg-lv2.png')
          break
        case '超历史':
        case '暴雨':
          bgUrl = require('@/assets/img/bg-lv3.png')
          break
        case '超汛限':
        case '大雨':
          bgUrl = require('@/assets/img/bg-lv4.png')
          break
        default:
          break
      }
      return bgUrl
    }
  }
}
</script>

<style lang="scss" scoped>
.infinite-scroll {
  box-sizing: border-box;
  font-family: Source Han Sans CN;

  .schedule_list {
    height: 100%;
    display: flex;
    flex-direction: column;
    .table-flex {
      display: flex;
      align-items: center;
      margin-bottom: 1vh;

      .item-th {
        text-align: left;
        font-weight: 400;
        font-size: 14px;
        color: #87cfff;
      }
    }
    .scrollDiv::-webkit-scrollbar {
      display: none;
    }
    .idx {
      flex: 3;
      text-align: center;
      font-weight: 400;
      font-size: 14px;
    }
    .list-style {
      width: 100%;
      height: 100%;
      // overflow: hidden;
    }
    .custom-slide {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background: url(@/assets/img/list-item.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      text-align: left;
      margin-bottom: 0.5vh;
      font-weight: 400;
      font-size: 14px;
      color: #fff;
      &.active {
        background: url(@/assets/img/list-item-active.png) no-repeat;
        background-size: 100% 100%;
      }

      .highlight {
        text-shadow: 0 0 8px #d5df19;
      }

      .txt-overflow {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
      }
    }
  }
}
</style>
